<template>
  <div class="container">
      <div id="myChart" :style="{width: '300px', height: '300px'}"></div>
      <div id="main" :style="{width: '300px', height: '300px'}"></div>

  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawLine();
    this.echartsInit();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "当周批转量和报备量",
          left: "5%"
        },
        tooltip: { trigger: "axis" },
        legend: {
          data: ["批转量", "报备量"],
          right: "5%"
        },
        grid: {
          left: "5%",
          right: "6%",
          bottom: "10%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["08-12", "08-13", "08-14", "08-15", "08-16", "08-17", "08-18"],
          axisLine: { lineStyle: { color: "#999", width: 0.1 } },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#999",
              width: 0.1
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: { lineStyle: { color: "#999", width: 0.1 } }
        },
        series: [
          {
            name: "批转量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20, 0],
            areaStyle: {
              color: "rgb(237,252,245)"
            },
            smooth: true,
            itemStyle: {
              normal: {
                color: "#53e59d"
              }
            }
          },
          {
            name: "报备量",
            type: "line",
            data: [15, 0, 36, 10, 10, 0, 0],
            areaStyle: {
              color: "rgb(220,247,245)"
            },
            smooth: true,
            itemStyle: {
              normal: {
                color: "#43c4fd"
              }
            }
          }
        ]
      });
    },
     echartsInit() {
        //柱形图
        //因为初始化echarts 的时候，需要指定的容器 id='main'
        this.$echarts.init(document.getElementById('main')).setOption({
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        })
	}
  }
};
</script>


<style scoped>

</style>
